<template>
  <div class="product-detail h-100P">
    <el-tabs v-model="activeName" type="border-card" lazy class=" h-100P">
      <el-tab-pane label="基本信息" name="brief" lazy>
        <Brief :value="productData"/>
      </el-tab-pane>
      <el-tab-pane label="产品功能" name="function" lazy class=" h-100P">
        <ProductFunction class=" h-100P" :metadata-id="productData.metadataId"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Brief from './components/brief'
import ProductFunction from './components/product-function'
import { apiFindProductById } from '@/views/device/create-product/api'

export default {
  name: 'ProductDetail',
  components: { Brief, ProductFunction },
  data() {
    return {
      activeName: 'brief',
      productData: {
        id: '', // 产品id
        name: '', // 产品名称
        metadataId: '', // 物模型Id
        devices: '', // 接入设备数
        netType: '', // 入网方式
        publishState: '', // 产品发布状态
        remark: '' // 备注说明
      }
    }
  },
  computed: {},
  mounted() {
    const { productId } = this.$route.query
    this.productData.id = productId
    this.initPage()
  },
  methods: {
    initPage() {
      this.findProductById(this.productData.id)
    },
    async findProductById(productId) {
      this.productData = await apiFindProductById(productId)
    }
  }
}
</script>

<style scoped lang="scss">
.product-detail {
  padding: 0;

  ::v-deep .el-tabs--border-card {
    background: #f3f4f8;
    border: none;
    box-shadow: none;
  }

  ::v-deep .el-tabs__header {
    width: fit-content;
    border: none;
  }

  ::v-deep .el-tabs__item {
    padding: 0 50px !important;
    color: #666;
    background-color: #dadce8;
    border: none;
    border-radius: 4px 4px 0 1px;

    &:not(:last-child) {
      margin-right: 8px;
    }

    &:not(.is-disabled):hover {
      color: #666;
    }
  }

  ::v-deep .el-tabs__item.is-active {
    color: #d12d1f;
    background-color: #fff;

    &:hover {
      color: #d12d1f;
    }
  }

  ::v-deep .el-tabs__content {
    height: 100%;
    padding: 20px;
    background: #fff;
  }
}
</style>
